<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="选择巡检规则" width="50%" align-center>
      <px-form
        ref="formRef"
        @submit.native.prevent
        class="custom-form-ui inspect-form"
        :model="queryParams"
        label-position="right"
        label-width="120px"
      >
        <px-row :gutter="16">
          <px-col :span="12">
            <px-form-item label="规则名称" prop="checkRuleNo">
              <px-input
                v-model="queryParams.checkRuleNo"
                placeholder="请输入巡检规则名称/编号"
                maxlength="50"
                clearable
                @blur="queryParams.checkRuleNo = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="8">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-row>
        <px-col
          ><InspectRulesTable
            v-model:query-params="queryParams"
            :table-data="tableData"
            :total="total"
            @select-items="selectTreeItems"
            @query-table="queryTable"
        /></px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="close">取消</px-button>
          <px-button type="primary" @click="confirm"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { queryEquipInspectPlan } from "@/api/erc/inspectPlan";
import { stringTrimOfParams } from "@/utils/common";
import { ref, watch } from "vue";
import InspectRulesTable from "./InspectRulesTable.vue";

const dialogVisible = defineModel("isView");
const queryParams = ref({ checkRuleNo: "", pageNum: 1, pageSize: 20 });
const tableData = ref<any>([]);

defineOptions({
  name: "SelectInspectRules"
});
const props = defineProps<{ facCode: string; checkTypes: string[]; eqpTypeCodes?: string }>();
const emits = defineEmits(["selectItems"]);
const total = ref(0);
const formRef = ref();
let selected: any[] = [];
async function queryTable() {
  const { checkTypes, eqpTypeCodes, facCode } = props;
  // 巡检内容为设备巡检时，获取巡检规则不传eqpTypeCodes
  let tableDataRaw = await queryEquipInspectPlan(
    stringTrimOfParams({ ...queryParams.value, facCode, checkTypes, eqpTypeCodes: eqpTypeCodes?.split(",") })
  );
  const { data, pageNum, pageSize, total: totalRaw } = tableDataRaw;
  queryParams.value.pageNum = pageNum;
  queryParams.value.pageSize = pageSize;
  total.value = totalRaw;
  tableData.value = data;
}
watch(
  dialogVisible,
  async val => {
    if (val) {
      await queryTable();
    }
  },
  { immediate: true }
);
function resetTable() {
  formRef.value?.resetFields();
  queryTable();
}
function selectTreeItems(val) {
  selected = val;
}
function close() {
  dialogVisible.value = false;
}
function confirm() {
  emits("selectItems", selected);

  dialogVisible.value = false;
  selected = [];
}
</script>
<style lang="scss" scoped>
:deep(.px-dialog__footer) {
  padding: 0 24px;
  padding-top: 16px;
}
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
